<template>
  <el-card :body-style="{ padding: '0px' }" class="news-item" :shadow="'hover'">
    <div style="padding: 14px;">
      <div class="title"><span>{{index}}</span>来自
        <span class="mark">外面的</span>
        系统
      </div>
      <div class="content">
        <span v-for="(item, idx) in colArr" :key="idx" :class="{'col-item': true }"> {{item.label}}：{{item.value}} </span>
      </div>
      <div class="bottom clearfix">
        <time class="time">消息入库时间：{{ item.createTime }}</time>
        <el-button type="text" class="button" style="margin-left:15px;" @click="toDetail()">详情</el-button>
        <el-button type="text" class="button" @click="warning()">预警</el-button>
      </div>
    </div>
  </el-card>
</template>
<script>
  export default {
    props: {
      index: {
        type: Number
      },
      item: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    data() {
      return {
        colArr: [],
        columns: {
          姓名: 'name',
          性别: 'csex',
          创建时间: 'createTime',
          创建人: 'creator',
          出生日期: 'birthday',
          国籍: 'country',
          级别: 'levelName'
        }
      };
    },
    methods: {
      toDetail() {
        this.$router.push('/focus-manage/edit/' + this.item.id);
      },
      warning() {
        this.$message({
          type: 'info',
          message: '预警功能开发中'
        });
      }
    },
    created() {
      for (let name in this.columns) {
        if (this.item[this.columns[name]]) {
          this.colArr.push({
            label: name,
            value: this.item[this.columns[name]]
          });
        }
      }
    }
  };
</script>
<style  type="text/scss" lang="scss" scoped>
  .news-item {
    margin: 2px 15px;
  }
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }

  .clearfix:after {
    clear: both;
  }
  .mark {
    color: #2356ce;
    cursor: pointer;
  }
  .content {
    padding: 10px 15px;
    text-indent: 2em;

    .col-item {
      margin-right: 15px;
    }
  }
</style>